import { defineComponent, ref } from "vue";
import { DropdownItem, DropdownMenu } from "vant";
import { filterMenuProps } from "./types";
import DatePicker from "./Components/DatePicker";
import style from "./index.module.less";
import apiTool, { getSize } from "@/command/apiTool";
import moment from "moment";
import "./index.less";
import Multiple from "./Components/Multiple";
import DropCalendarItem from "./Components/DropCalendarItem";
import Request from "./Components/Request";
import DropCascadeItem from "./Components/DropCascadeItem";

export default defineComponent({
  name: "filter-menu",
  props: filterMenuProps,
  emits: ["update:form", "update:modelValue"],
  setup(props, { emit }) {
    const datePickerMenu = ref<any>();
    const menu = ref<any>({});

    const getTime = () => {
      return moment().format("YYYY-MM-DD").split("-");
    };

    const onChange = (key: string, value: any) => {
      if (props.modelValue) {
        props.modelValue[key] = value;
        emit("update:modelValue", props.modelValue);
      }
    };

    const onChangeKeys = (obj: object) => {
      Object.keys(obj).forEach((key) => {
        props.modelValue[key] = (obj as any)[key];
      });
    };
    // 定位
    const positioning = () => {
      const dom = document.querySelectorAll(".van-dropdown-menu");
      if (dom && dom.length > 0) {
        const element = dom[0] as HTMLElement;
        const rect = dom[0].getBoundingClientRect();
        apiTool.scrollToPosition(element!.offsetTop - rect.height + 0);
      }
    };

    const getKeysValue = (item: any) => {
      return item.keys.map((e: any) => props.modelValue[e]);
    };
    const getUrl = (item: any) => {
      const obj = {
        area: "/api/H5/util/getDictType?dictType=country_code",
        field: "/api/H5/util/getDictType?dictType=expert_areas",
        idleTime: "/api/H5/util/getDictType?dictType=day_scope",
        productType: "/api/H5/util/getProductLevel",
        exhibitionType: "/api/H5/util/getDictType?dictType=show_type",
        workType: "/api/H5/util/getDictType?dictType=work_type",
        policyType: "/api/H5/util/getDictType?dictType=policy_type",
        packType: "/api/H5/util/getDictType?dictType=pack_type",
        plantType: "/api/H5/util/getDictType?dictType=2",
        agriculturalType: "/api/H5/util/getAgriculturalType",
      } as any;
      if (obj[item.type]) {
        return obj[item.type];
      } else {
        return "";
      }
    };
    const renderView = (item: any) => {
      switch (item.comType) {
        case "multiple":
          return (
            <Request url={getUrl(item)}>
              {{
                default: (data: any) => {
                  return (
                    <Multiple
                      onOpen={positioning}
                      item={item}
                      data={data}
                      v-model={props.modelValue[item.key]}
                    />
                  );
                },
              }}
            </Request>
          );
        case "single":
          return (
            <Request url={getUrl(item)}>
              {{
                default: (data: any) => {
                  return (
                    <DropdownItem
                      title={item.title}
                      ref={(re) => {
                        (menu.value as any)[item.key] = re;
                      }}
                      v-model={props.modelValue[item.key]}
                      onOpen={positioning}
                      options={(item.data || data).map((e: any) => ({
                        text: e.label,
                        value: e.value,
                      }))}
                    ></DropdownItem>
                  );
                },
              }}
            </Request>
          );
        case "calendar":
          return (
            <DropCalendarItem
              onOpen={positioning}
              item={item}
              onChange={(value) => onChangeKeys(value)}
              modelValue={getKeysValue(item)}
            />
          );
        case "datePicker":
          return (
            <DropdownItem
              title={item.title}
              class={style.datePicker}
              ref={datePickerMenu}
              onOpen={positioning}
            >
              <DatePicker
                // v-model={props.modelValue[item.key]}
                value={props.modelValue[item.key] || getTime()}
                onChange={(value: any) => {
                  onChange(item.key, value);
                  datePickerMenu.value.toggle();
                }}
              />
            </DropdownItem>
          );
        case "cascade":
          return (
            <DropCascadeItem
              onOpen={positioning}
              item={item}
              v-model={props.modelValue[item.key]}
            />
          );
      }
    };
    const getDefaultConfig = (item: any): any => {
      const types = {
        area: {
          title: "区域",
          comType: "multiple",
        },
        productType: {
          title: "产品类型",
          comType: "multiple",
        },
        exhibitionType: {
          title: "展销类型",
          comType: "multiple",
        },
        workType: {
          title: "工作类型",
          comType: "multiple",
        },
        datePicker: {
          title: "日期选择",
          comType: "datePicker",
        },
        calendar: {
          title: "日历选择",
          comType: "calendar",
        },
        field: {
          title: "涉及领域",
          comType: "single",
        },
        idleTime: {
          title: "空闲时间",
          comType: "single",
        },
        policyType: {
          title: "政策类型",
          comType: "single",
        },
        packType: {
          title: "包装类型",
          comType: "single",
        },
        agriculturalType: {
          title: "农资",
          comType: "multiple",
        },
        // plantType:{
        //   title: "产品类别",
        //   comType: "multiple",
        // }
      };
      if ((types as any)[item.type]) {
        return { ...(types as any)[item.type], ...item };
      } else {
        return { ...item };
      }
    };
    const getData = (): any[] => {
      if (props.choose && props.choose.length > 0) {
        return props.choose.map((e) => getDefaultConfig(e));
      }
      return props.data;
    };
    return () => {
      return (
        <DropdownMenu
          class={"drop-menu"}
          style={{
            "--van-dropdown-menu-shadow": "none",
            "--van-dropdown-menu-title-font-size": getSize(15),
            "--van-dropdown-menu-height": getSize(40),
            "--van-dropdown-menu-title-line-height": getSize(12),
            borderBottom: "1px solid #EFEFEF",
          }}
        >
          {getData().map((e) => renderView(e))}
        </DropdownMenu>
      );
    };
  },
});
